<template>
  <el-header>
    <el-row type="flex" align="middle">
      <el-col :span="4">
        <div class="system-title">智能社区管理系统</div>
      </el-col>
      <el-col :span="20">
        <el-menu mode="horizontal" :default-active="activeIndex" @select="handleMenuSelect">
          <el-menu-item index="1">首页</el-menu-item>
          <el-menu-item index="2">公告</el-menu-item>
          <el-menu-item index="3">访客</el-menu-item>
          <el-menu-item index="4">活动</el-menu-item>
          <el-menu-item index="5">社区论坛</el-menu-item>
          <el-menu-item style="float: right;">
            <el-dropdown @command="handleCommand">
              <span class="el-dropdown-link custom-dropdown-link">
                <el-avatar :size="40" :src="userInfo.image"></el-avatar>
                <span class="user-name">{{ userInfo.username }}</span>
              </span>
              <el-dropdown-menu slot="dropdown" class="custom-dropdown-menu">
                <el-dropdown-item command="personal">个人中心</el-dropdown-item>
                <el-dropdown-item command="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-menu-item>
        </el-menu>
      </el-col>
    </el-row>
  </el-header>
</template>

<script>
export default {
  props: {
    userInfo: {
      type: Object,
      default: () => ({
        username: '',
        image: ''
      }),
    }
  },
  data() {
    return {
      activeIndex: '0' // 默认激活的菜单项
    };
  },
  mounted() {
    this.setActiveIndexByRoute(); // 初始化时根据当前路由设置激活项
  },
  watch: {
    $route() {
      this.setActiveIndexByRoute(); // 路由变化时更新激活项
    }
  },
  methods: {
    setActiveIndexByRoute() {
      const route = this.$route.path;
      switch (route) {
        case '/owner/home':
          this.activeIndex = '1';
          break;
        case '/owner/announcements':
          this.activeIndex = '2';
          break;
        case '/owner/visitor':
          this.activeIndex = '3';
          break;
        case '/owner/activity':
          this.activeIndex = '4';
          break;
        case '/owner/forum':
          this.activeIndex = '5';
          break;
      }
    },
    handleCommand(command) {
      if (command === 'personal') {
        this.personal();
      } else if (command === 'logout') {
        this.logout();
      }
    },
    personal() {
      this.$router.push('/owner/personal');
    },
    logout() {
      this.$confirm('确认退出登录?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$message.success('已退出登录');
          this.$router.push('/login');
        })
        .catch(() => {
          // 用户取消退出登录
        });
    },
    handleMenuSelect(index) {
      const currentRoute = this.$route.path;
      switch (index) {
        case '1':
          if (currentRoute !== '/owner/home') {
            this.$router.push('/owner/home');
          }
          break;
        case '2':
          if (currentRoute !== '/owner/announcements') {
            this.$router.push('/owner/announcements');
          }
          break;
        case '3':
          if (currentRoute !== '/owner/visitor') {
            this.$router.push('/owner/visitor');
          }
          break;
        case '4':
          if (currentRoute !== '/owner/activity') {
            this.$router.push('/owner/activity');
          }
          break;
        case '5':
          if (currentRoute !== '/owner/forum') {
            this.$router.push('/owner/forum');
          }
      }
    }
  }
};
</script>

<style scoped>
.el-header {
  background-color: #409EFF;
  color: #fff;
  line-height: 60px;
}

.system-title {
  font-size: 20px;
  font-weight: bold;
}

.custom-dropdown-link {
  outline: none !important;
  box-shadow: none !important;
  display: flex;
  align-items: center;
}

.user-name {
  margin-left: 10px;
  font-size: 18px;
}

.custom-dropdown-menu {
  width: 150px;
}

.custom-dropdown-menu .el-dropdown-item {
  font-size: 20px;
  padding: 12px 20px;
}
</style>